<!--
 * @Author: Neko
 * @Date: 2021-06-03 16:19:48
 * @LastEditTime: 2021-06-09 09:53:34
 * @LastEditors: Neko
-->
<template>
  <view class="property__container" :class="{ active: active }" @click="onClickProperty">
    <text>
      <slot>
      </slot>
    </text>
  </view>
</template>

<script>
export default {
  props: {
    active: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    onClickProperty() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.property__container {
  width: 183rpx;
  height: 64rpx;
  padding: 0 37rpx 0 39rpx;
  line-height: 64rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 22rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #F5F5F5;
  color: #000;

  &.active {
    background: #E4EFFF;
    color: #0049AC;
  }
}
</style>